<template>
	<div class="conbox" id="account">
		<header class="header">
			<ul>
				<li @click="switchTab(index,item.value)" v-bind:class="actives == index ? 'active' : '' "
					v-for="(item,index) in navtab" :key="index">
					{{item.tabtext}}
				</li>
			</ul>
		</header>
		<div class="account_content">
			<ul lass="centerul">
				<li class="account_list" v-for="(item,index) in listcount" :key="index">
					<p class="chongzhi">
                                <span class="account_title"
									  :class="{red:item.log_type=='收入',green:item.log_type=='支出'}">{{item.log_type==2?'结算':item.log_type==3?'充值':item.log_type==4?'提现':'解冻'}}</span>
						<span class="apply_way" v-if="(log_type==3)&&item.pay_name">充值({{item.pay_name}})</span>
						<span class="account_price">￥{{item.amount}}</span>
					</p>
					<div class="account_remarks">
						<p class="handle_status">{{item.status}}</p>
						<p>备注：<span>{{item.remark}}</span></p>
						<p>{{item.add_time}}</p>
					</div>
					<div class="group_btn" v-if="false">
						<button>付款</button>
						<button>取消</button>
					</div>
				</li>
				<uniLoadMore :loadingType="loadingType" :status="loading"></uniLoadMore>
			</ul>
		</div>
		<uniPopup class="choosegoodst" maxHeight="100vh" width="100%" ref="diffclass"
				  @touchmove.stop.prevent="moveHandle" type="top" @change="hidemask" v-on:click.stop="chooseclas">
			<ul>
				<li v-for="(item,index) in selected" :key="index"
					v-bind:class="isactive == index ? 'lion' : '' " @click="chooseclas(item.text,item.value,index)">
					{{item.text}}
					<view v-show="isactive === index" class="iconfont iconxuanze"></view>
				</li>
			</ul>
		</uniPopup>
	</div>
</template>

<script>
import { getaccount } from '@/api/payment'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name: 'accountDetail',
	components: {
		uniLoadMore,
		uniPopup
	},
	data() {
		return {
			actives: -1,
			isactive: -1,
			opactive1: 0,
			opactive2: 0,
			opactive3: 0,
			selectstatus: '',
			navtab: [
				{ tabtext: '分类', value: 0 },
				{ tabtext: '类型', value: 0 },
				{ tabtext: '状态', value: 0 }
			],
			selected: [],
			option1: [
				{ text: '分类', value: 0 },
				{ text: '收入', value: 3 },
				{ text: '支出', value: 4 }
			],
			option2: [
				{ text: '类型', value: 0 },
				{ text: '结算', value: 2 },
				{ text: '充值', value: 3 },
				{ text: '提现', value: 4 },
				{ text: '解冻', value: 5 },
				{ text: '代销佣金', value: 7 }
			],
			option3: [
				{ text: '状态', value: 0 },
				{ text: '已完成', value: 1 },
				{ text: '待处理', value: 2 }
			],
			log_type: 0,
			label_account: 0,
			is_paid: 0,
			page: 1,
			listcount: [],
			loading: '',
			loadingType: 0,
			owner_user_id: ''
		}
	},
	mounted() {
		this.selected = this.option1
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.lodingstatus('数据加载中')
		this.accountlist()
	},
	onPullDownRefresh() {
		this.loading = ''
		this.accountlist()
		this.lodingstatus('数据刷新中')
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		that.timer = setTimeout(function() {
			that.getaccountdmore()
		}, 1000)
	},
	methods: {
		switchTab(index, value) {
			// 头部导航选择
			this.$refs.diffclass.open()
			this.actives = index
			this.selectstatus = index
			if (index == 0) {
				this.isactive = this.opactive1
				// this.label_account = value
				this.selected = this.option1
			} else if (index == 1) {
				this.isactive = this.opactive2
				// this.log_type = value
				this.selected = this.option2
			} else {
				this.isactive = this.opactive3
				// this.is_paid = value
				this.selected = this.option3
			}
		},
		chooseclas(text, value, index) {
			// 下拉框选择
			this.$refs.diffclass.close()
			this.isactive = index
			this.page = 1
			this.listcount = []
			if (this.selectstatus == 0) {
				this.navtab[0].tabtext = text
				this.navtab[0].value = value
				this.opactive1 = index
				this.label_account = value
			} else if (this.selectstatus == 1) {
				this.navtab[1].tabtext = text
				this.navtab[1].value = value
				this.opactive2 = index
				this.log_type = value
			} else {
				this.navtab[2].tabtext = text
				this.navtab[2].value = value
				this.opactive3 = index
				this.is_paid = value
			}
			this.lodingstatus('数据加载中')
			this.accountlist()
		},
		hidemask() {
			this.actives = -1
		},
		accountlist() {
			this.page = 1
			uni.showNavigationBarLoading()
			this.loadingType = 0
			let data = {
				ru_id: this.owner_user_id,
				log_type: this.log_type,
				label_account: this.label_account,
				is_paid: this.is_paid,
				size: 10,
				page: this.page
			}
			getaccount(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length !== 0) {
						let lists = res.data.data
						this.listcount = lists
						uni.hideNavigationBarLoading()
						uni.stopPullDownRefresh()
						this.loading = ''
					} else {
						this.loading = 'nodata'
					}
				} else {
					this.msg(res.message)
					this.loading = 'nodata'
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			})
		},
		getaccountdmore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			this.lodingstatus('数据加载中')
			let data = {
				ru_id: this.owner_user_id,
				log_type: this.log_type,
				label_account: this.label_account,
				is_paid: this.is_paid,
				page: this.page,
				size: 10
			}
			getaccount(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = this.listcount.concat(lists)
						this.loadingType = 0
					} else {
						this.loading = 'nomore'
					}
					if (res.data.current_page == res.data.last_page) {
						this.loading = 'nomore'
					}
				} else {
					this.msg(res.message)
					this.loading = 'nodata'
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		lodingstatus(msg) {
			uni.showLoading({
				title: msg
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 200)
		}
	}
}
</script>

<style scoped lang="scss">
	.conbox{
		width:100%;
		height:auto;
		float:left;
		background: #F5F5F5;
	}
	#account .header {
		text-align: unset;
		line-height: normal;
		height: 90px;
		line-height: 90px;
		width: 100%;
		top:0;
		z-index: 999999;
		position: fixed;
		background: white;
		/* border-bottom: 1px solid #ddd;*/
	}
	#account .header ul {
		display: block;
		float: left;
		height: 90px;
		line-height: 90px;
		width: 100%;
		background: white;
	}
	#account .header ul li {
		width: 33.33%;
		height: 100%;
		float: left;
		color: #999999;
		font-size: 28px;
		text-align: center;
		position: relative;
		background: url($imgUrl+ 'design/down.png') right 20% top 50%;
		background-repeat: no-repeat;
		background-size: 14px 8px;
	}
	#account .header ul .active {
		color: #333333;
		background: url($imgUrl+ 'design/up.png') right 20% top 50%;
		background-repeat: no-repeat;
		background-size: 14px 8px;
	}
	.account_content {
		width: 100%;
		height: auto;
		/*float: left;*/
		margin-top: 110px;
		background: white;
	}
	.account_content ul {
		width: 100%;
		height: auto;
		/*float: left;*/
		display: block;
	}
	.account_content ul li {
		height: 200px;
		width: 90%;
		/* float: left;*/
		margin-left: 5%;
		padding: 30px 0;
		border-bottom: 2px solid #eeeeee;
	}
	.account_content ul li:last-child {
		border-bottom: none;
	}
	.account_content ul li .chongzhi {
		font-size: 30px;
	}
	.account_list span {

	}
	.account_list .account_title {
		float: left;
		color: #999999;
	}

	.chongzhi .red {
		color: #FF5454;
	}

	.chongzhi .green {
		color: #10C025;
	}

	.handle_status {
		color: #FF6900;
	}

	.apply_way {
		margin-left: 32px;
	}
	.account_list .account_price {
		float: right;
	}
	.account_remarks {
		clear: both;
		margin-top: 29px;
		float: left;
		color: #999999;
		margin-left: 88px;
	}
	.account_remarks p{
		line-height:40px;
	}
	.group_btn {
		clear: both;
		float: right;
		margin-top: 20px;
	}
	.group_btn button {
		width: 140px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 30px;
		border-radius: 30px;
		border: 2px solid #eeeeee;
		background: white;
	}

	.group_btn button:first-child {
		margin-right: 20px;
	}

	.choosegoodst {
		/*margin-top: 90px;*/
		width: 100%;
		/*height: 500px;*/
		/*background: white;*/
	}
	#account .choosegoodst li {
		height: 80px;
		float: left;
		line-height: 80px;
		width: 100%;
		color: #999;
		font-size: 28px;
		text-indent: 30px;
		border-bottom: 1px solid #dddddd;
		.iconfont{
			float: right;
			margin-right: 25px;
		}
	}
	.choosegoodst li:last-child {
		border: none;
	}
	#account .lion {
		font-weight: bold;
		color: #333333;
		/*background: url($imgUrl+ 'design/choosed.png') right 30px center;
		background-repeat: no-repeat;
		background-size: 30px 25px;*/
		.iconxuanze {
			color: #FF6900;
			font-size: 45px;
		}
	}
	#account /deep/ .uni-popup__wrapper.top {
		background: white;
		top: 90px;
	}
</style>
